<template>
    <div  class="myCart">
            

                 <Header   title="购物车"  :edit="true"  />
                 <CartDetails  v-if = 'isShow'   :changeShow="changeShow"/>
                 <Blank   v-else/> 
                 <Footer/>
    </div>
</template>

<script>
  import Footer from '../../components/Footer.vue'
import Header from '../../components/Header.vue'

import CartDetails from './component/CartDetails.vue'
import Blank from '../../components/Blank.vue'
import { useStore } from 'vuex'
import { ref,onMounted} from 'vue'





export default {
     components:{
        Footer,
          Header,
          Blank ,
          CartDetails 
     },


     setup(){
               
      const store = useStore()
      let isShow = ref(true)




      // 1、初始化兜底样式展示与否--通过cartList.length来判断
      const init = ()=>{

        if  (store.state.cartList.length === 0) isShow.value = false;
      }            

        onMounted(() => {
            init()
        });


      const  changeShow =()=>{
             
           isShow.value = false
      }

      return{

        isShow,
        changeShow

      }
     }
        
    }
</script>

<style lang="less" scoped>
         .myCart{
            display: flex;
            flex-flow: column;
            height: 100%;
           
          }
</style>